import React from 'react';
import { Layout, Typography, Card, List, Tag, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { 
  RollbackOutlined, 
  TrophyOutlined, 
  BookOutlined, 
  AppstoreOutlined, 
  DashboardOutlined,
  BankOutlined,
  SafetyOutlined,
  FireOutlined,
  ThunderboltOutlined
} from '@ant-design/icons';
import AnimatedButton from '../components/AnimatedButton';
import AnimatedText from '../components/AnimatedText';
import LegalParticlesBackground from '../components/LegalParticlesBackground';
import LegalDecorations from '../components/LegalDecorations';
import LegalCard from '../components/LegalCard';
import AnimatedDice from '../components/AnimatedDice';

const { Content, Footer } = Layout;
const { Title, Paragraph, Text } = Typography;

const Tutorial = () => {
  const navigate = useNavigate();

  return (
    <Layout className="law-adventure-layout">
      {/* 粒子背景 */}
      <LegalParticlesBackground type="lawBooks" />
      
      {/* 装饰元素 */}
      <LegalDecorations />
      
      <div style={{
        background: 'linear-gradient(135deg, var(--primary-color), #2c3e50)',
        padding: '16px 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        position: 'relative',
        zIndex: 1
      }}>
        <AnimatedText
          text="玩法介绍"
          type="wordByWord"
          fontSize="36px"
          fontWeight="600"
          fontFamily="var(--title-font)"
          color="var(--light-color)"
          textAlign="center"
          style={{ display: 'flex', alignItems: 'center' }}
          delay={0.2}
        >
          <BookOutlined style={{ marginRight: '10px' }} />
        </AnimatedText>
      </div>
      
      <Content className="law-adventure-content">
        <div style={{ position: 'relative', maxWidth: '1200px', margin: '0 auto' }}>
          <LegalCard 
            style="legal"
            title={
              <AnimatedText
                text="游戏概述"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <AnimatedText
              text="欢迎来到法链云迹，这是一款寓教于乐的法律知识普及游戏。通过回答法律问题击败Boss，一路闯关，同时学习法律知识！"
              type="fade"
              delay={0.3}
            />
            <AnimatedText
              text="游戏包含民法和刑法两个主题，每个主题设有5个关卡，每关有不同的Boss和挑战。挑战自己，成为法律知识大师吧！"
              type="fade"
              delay={0.5}
              style={{ marginTop: '10px', display: 'block' }}
            />
          </LegalCard>
          
          <LegalCard 
            style="parchment"
            title={
              <AnimatedText
                text="游戏流程"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--accent-color)"
              />
            }
          >
            <List
              bordered
              className="scroll-effect"
              dataSource={[
                '1. 在首页选择"开始游戏"',
                '2. 选择游戏主题（民法/刑法）',
                '3. 选择游戏风格（保守/稳健/激进）',
                '4. 选择案例类型（至少2个，最多8个）',
                '5. 进入游戏闯关'
              ]}
              renderItem={(item, index) => (
                <List.Item>
                  <AnimatedText
                    text={item}
                    type="slideRight"
                    delay={0.3 + index * 0.1}
                  />
                </List.Item>
              )}
            />
          </LegalCard>
          
          <LegalCard 
            style="scroll"
            title={
              <AnimatedText
                text="游戏风格"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <Space direction="vertical" style={{ width: '100%' }}>
              {[
                { 
                  icon: <SafetyOutlined />,
                  title: '保守型',
                  shield: 6,
                  sword: 1,
                  description: '更高的生存能力，但律刃值较低',
                  color: 'green'
                },
                { 
                  icon: <BankOutlined />,
                  title: '稳健型',
                  shield: 4,
                  sword: 2,
                  description: '法盾值和律刃值均衡',
                  color: 'blue'
                },
                { 
                  icon: <FireOutlined />,
                  title: '激进型',
                  shield: 2,
                  sword: 3,
                  description: '更高的律刃值，但法盾值较低',
                  color: 'volcano'
                }
              ].map((style, index) => (
                <LegalCard
                  key={style.title}
                  style={index === 0 ? 'legal' : index === 1 ? 'scroll' : 'parchment'}
                  title={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <span style={{ marginRight: '10px', fontSize: '24px' }}>{style.icon}</span>
                      {style.title}
                    </div>
                  }
                >
                  <AnimatedText
                    text={`起始法盾值 🛡️：${style.shield}点`}
                    type="fade"
                    delay={0.3 + index * 0.1}
                    style={{ display: 'block', marginBottom: '8px' }}
                  />
                  <AnimatedText
                    text={`起始律刃值 ⚔️：${style.sword}点`}
                    type="fade"
                    delay={0.4 + index * 0.1}
                    style={{ display: 'block', marginBottom: '8px' }}
                  />
                  <AnimatedText
                    text={`特点：${style.description}`}
                    type="highlight"
                    delay={0.5 + index * 0.1}
                  />
                </LegalCard>
              ))}
            </Space>
          </LegalCard>
          
          <LegalCard 
            style="legal"
            title={
              <AnimatedText
                text="案例选择与律迹骰系统"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <AnimatedText
              text="在案例选择页面，您可以选择2-8个案例类型。每选择超过2个的额外案例，将获得1个额外的律迹骰 🎲。"
              type="fade"
              delay={0.3}
              style={{ marginBottom: '10px', display: 'block' }}
            />
            
            <div style={{ 
              backgroundColor: 'rgba(166, 124, 0, 0.1)', 
              padding: '10px', 
              borderRadius: '4px',
              marginBottom: '20px'
            }}>
              <AnimatedText
                text="例如：选择4个案例类型，将获得2个律迹骰。"
                type="highlight"
                delay={0.4}
                fontWeight="bold"
              />
            </div>
            
            <AnimatedText
              text="律迹骰效果："
              type="fade"
              delay={0.5}
              fontWeight="bold"
              fontSize="18px"
              style={{ marginBottom: '10px', display: 'block' }}
            />
            
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '20px', marginBottom: '20px' }}>
              {[...Array(6)].map((_, i) => (
                <AnimatedDice 
                  key={i} 
                  size={70} 
                  value={i + 1} 
                />
              ))}
            </div>
            
            <List
              bordered
              className="scroll-effect"
              dataSource={[
                '点数为1：增加3点法盾值 🛡️',
                '点数为2：增加3点律刃值 ⚔️',
                '点数为3：增加2点法盾值和2点律刃值 🛡️⚔️',
                '点数为4：增加1个律迹骰 🎲',
                '点数为5：当前律刃值翻倍 ⚔️✨',
                '点数为6：当前法盾值翻倍 🛡️✨'
              ]}
              renderItem={(item, index) => (
                <List.Item>
                  <AnimatedText
                    text={item}
                    type="slideRight"
                    delay={0.6 + index * 0.1}
                  />
                </List.Item>
              )}
            />
          </LegalCard>
          
          <LegalCard 
            style="scroll"
            title={
              <AnimatedText
                text="游戏关卡"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <AnimatedText
              text="游戏共有5个关卡："
              type="fade"
              delay={0.3}
              style={{ marginBottom: '15px', display: 'block' }}
            />
            
            <List
              bordered
              className="scroll-effect"
              dataSource={[
                { level: '第一关', name: '普通Boss', color: 'blue', stats: '法熵值10，侵权烈度1，无特殊效果' },
                { level: '第二关', name: '恶意程序劫持', color: 'purple', stats: '法熵值20，侵权烈度1，每回合有30%概率使玩家无法使用技能' },
                { level: '第三关', name: '法域迷雾', color: 'green', stats: '法熵值30，侵权烈度2，玩家对boss的攻击有30%的几率被boss闪避' },
                { level: '第四关', name: '权利滥用', color: 'orange', stats: '法熵值40，侵权烈度3，攻击时有50%概率造成双倍伤害' },
                { level: '第五关', name: '终局威慑', color: 'red', stats: '法熵值50，侵权烈度5，Boss免疫所有技能效果，且每回合侵权烈度增加1点' }
              ]}
              renderItem={(item, index) => (
                <List.Item>
                  <AnimatedText
                    text={`${item.level}：`}
                    type="fade"
                    delay={0.3 + index * 0.1}
                    fontWeight="bold"
                  />
                  <Tag color={item.color} style={{ margin: '0 8px' }}>{item.name}</Tag>
                  <AnimatedText
                    text={item.stats}
                    type="highlight"
                    delay={0.4 + index * 0.1}
                  />
                </List.Item>
              )}
            />
          </LegalCard>
          
          <LegalCard 
            style="legal"
            title={
              <AnimatedText
                text="答题规则"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <List
              bordered
              className="scroll-effect"
              dataSource={[
                { icon: <ThunderboltOutlined style={{ color: 'var(--secondary-color)' }} />, text: '答对题目：根据您的律刃值对Boss造成伤害' },
                { icon: <ThunderboltOutlined style={{ color: 'var(--accent-color)' }} />, text: '答错题目：您的法盾值减少1点' },
                { icon: <ThunderboltOutlined style={{ color: 'var(--dark-color)' }} />, text: '法盾值为0：游戏失败' },
                { icon: <ThunderboltOutlined style={{ color: 'var(--adventure-color)' }} />, text: 'Boss法熵值为0：击败当前Boss，获得1个律迹骰，进入下一关' },
                { icon: <ThunderboltOutlined style={{ color: 'var(--secondary-color)' }} />, text: '击败最终Boss：游戏胜利！' }
              ]}
              renderItem={(item, index) => (
                <List.Item>
                  {item.icon}
                  <AnimatedText
                    text={item.text}
                    type="slideRight"
                    delay={0.3 + index * 0.1}
                    style={{ marginLeft: '10px' }}
                  />
                </List.Item>
              )}
            />
          </LegalCard>
          
          <LegalCard 
            style="scroll"
            title={
              <AnimatedText
                text="法律概念拼接小游戏"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--primary-color)"
              />
            }
          >
            <AnimatedText
              text="在游戏加载过程中，您可以体验法律概念拼接小游戏，让等待变得更有趣！"
              type="fade"
              delay={0.3}
              style={{ marginBottom: '15px', display: 'block' }}
            />
            
            <List
              bordered
              className="scroll-effect"
              dataSource={[
                { icon: <AppstoreOutlined style={{ color: 'var(--secondary-color)' }} />, text: '游戏形式：将法律定义分割成小段，按正确顺序点击拼接完整' },
                { icon: <TrophyOutlined style={{ color: 'var(--accent-color)' }} />, text: '完成奖励：每完成一轮拼接可获得一个律迹骰' },
                { icon: <DashboardOutlined style={{ color: 'var(--dark-color)' }} />, text: '游戏特点：即使加载完成也会等您完成当前轮次再跳转' },
                { icon: <BookOutlined style={{ color: 'var(--adventure-color)' }} />, text: '题库内容：包含表见代理、债权人代位权等多个法律概念' },
                { icon: <SafetyOutlined style={{ color: 'var(--secondary-color)' }} />, text: '辅助功能：提供清除按钮重新选择，题库加载完成后可使用提示功能查看正确顺序' }
              ]}
              renderItem={(item, index) => (
                <List.Item>
                  {item.icon}
                  <AnimatedText
                    text={item.text}
                    type="slideRight"
                    delay={0.3 + index * 0.1}
                    style={{ marginLeft: '10px' }}
                  />
                </List.Item>
              )}
            />
          </LegalCard>
          
          <LegalCard 
            style="parchment"
            title={
              <AnimatedText
                text="游戏技巧"
                type="slideDown"
                fontSize="24px"
                fontFamily="var(--title-font)"
                color="var(--accent-color)"
              />
            }
          >
            <div className="golden-frame">
              <ul style={{ listStyleType: 'none', paddingLeft: '10px' }}>
                {[
                  '合理选择游戏风格，根据自己的答题能力选择适合的法盾值和律刃值配比',
                  '多选择案例类型以获得更多律迹骰，增加游戏容错率',
                  '在关键时刻使用律迹骰，可能会扭转战局',
                  '第三关后Boss难度提升，请做好准备',
                  '注意阅读题目解析，积累法律知识，提高正确率'
                ].map((tip, index) => (
                  <li key={index} style={{ margin: '10px 0' }}>
                    <span style={{ color: 'var(--secondary-color)', marginRight: '10px' }}>✦</span>
                    <AnimatedText
                      text={tip}
                      type="fade"
                      delay={0.3 + index * 0.1}
                    />
                  </li>
                ))}
              </ul>
            </div>
          </LegalCard>
          
          <div style={{ textAlign: 'center', margin: '24px 0' }}>
            <AnimatedButton
              style="legal"
              size="large"
              icon={<RollbackOutlined />}
              onClick={() => navigate('/')}
            >
              返回首页
            </AnimatedButton>
          </div>
        </div>
      </Content>
      
      <Footer className="law-adventure-footer">
        <div>
          法链云迹 - 寓教于乐的法律知识普及游戏
        </div>
      </Footer>
    </Layout>
  );
};

export default Tutorial;
